<script>
// 1-
import axios from "axios";
import github from "@/request";
import {getSearchUsers} from "@/api/github";
export default {
    name: "App",
    data(){
        return {
            isStartSearch:false,
            isLoading:false,
            items:[]
        }
    },
    methods:{
        async searchUser(){
            this.isStartSearch = true;// 开始搜索啦
            this.isLoading = true;// 开始加载
            const q = this.$refs.q.value.trim();
            if(!q){
                alert("请输入搜索的关键字！")
                return;
            }

            // 1
            // https://api.github.com/search/users?q=react
            // axios.get("https://api.github.com/search/users",{
            //     params:{
            //         q
            //     }
            // }).then(value=>{
            //     // console.log(value.data);
            //     this.items = value.data.items;
            // })

            // 2
            // github.get("/search/users",{
            //     params:{
            //         q
            //     }
            // }).then(value=>{
            //     this.items = value.items
            // })

            // 3
            const {items} = await getSearchUsers(q);
            this.items = items;
            this.isLoading = false;

        }
    }
}
</script>

<template>
    <div data-reactroot="" class="container">
        <section class="jumbotron">
            <h3 class="jumbotron-heading">Search Github Users</h3>
            <div>
                <input @keydown.enter="searchUser" ref="q" type="text" placeholder="请输入搜索的用户名称">
                <button @click="searchUser">搜索</button>
            </div>
        </section>
        <h3 v-if="!isStartSearch">您还未开始搜索！搜索的结果会在此处进行呈现！</h3>
        <h3 v-else-if="isLoading">正在拼命加载中……</h3>
        <div v-else class="row">
            <div class="card" v-for="item in items" :key="item.id">
                <a href="https://github.com/aa" target="_blank">
                    <img :src="item.avatar_url" style="width: 100px;">
                </a>
                <p class="card-text">{{item.login}}</p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.album {
    min-height: 50rem; /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
}

.card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
}

.card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
}

.card-text {
    font-size: 85%;
}

</style>